<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="author" content="huaicheng151201@163.com"/>
    <meta name="keywords" content="HTML,PHP,SQL"/>
    <meta name="description" content=""/>
    <meta name="revised" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <title>热门歌曲</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/share.css">
    <link rel="stylesheet" href="css/hot.css">
    <style>
        header{width:100%;height:auto;position:relative;z-index:11;position: fixed;}
        header>div{width:100%;background-color:#00C0FF;padding:0;}
        header span:nth-child(1){width:8%;vertical-align: middle;}
        header span:nth-child(2){width:79%;color:#fff;font-size:1.6rem;text-align:center;vertical-align: middle;}
        header span:nth-child(3){width:8%;vertical-align: middle;text-align:right;}
    </style>
</head>
<body>
    <header>
        <div>
            <span class="return"><img src="images/return.png" alt="" style="width:40%;"></span>
            <span>热门单曲</span>
            <span class="hide" onclick="javascript:window.location.href='search_all.html'"><img src="images/search_all.png" alt="" style="width:60%;"></span>
        </div>
    </header>
    <section style="padding:0;padding-top:42px;">
        <div style="width:100%;height:100%;"><img src="images/hotSong_back.png" alt="" style="width:100%;"></div>
        <div class="song_box">
            <p>
                <span class="j-lianxu-btn"><img src="images/hotSong_play.png" alt="" style="width:60%;"></span>
                <span>连续播放 <b class="hide">（共100首）</b></span>
                <span class="hide"><b></b>多选</span>
            </p>
            <ul id="j-hot-song">
                <p style="text-align: center;">加载中....</p>
            </ul>
        </div>
    </section>
    <!--图标-->
    <p class="icon j-open-player"><img src="images/listen_icon.png" alt="" style=""></p>
    <div class="mask hide"></div>
    <div class="player-box hide"  id="player">
        <div class="player-list">
            <ul>

            </ul>
        </div>
        <div class="progress-wrapper">
            <span class="ticker cur"></span>
            <div class="progress">
                <div class="bar noUi-target noUi-ltr noUi-horizontal noUi-connect"><div class="noUi-base">
                    <div class="noUi-origin noUi-background noUi-stacking"><div class="noUi-handle noUi-handle-lower"></div></div></div></div>
            </div>
            <span class="duration j-duration"></span>
        </div>
        <p id="tip-cnetent"></p>
        <div class="col-6 iconcenter">
            <div class="iconfont icon-prev">&#xe60c;</div>
            <div class="iconfont icon-play-pause">&#xe600;</div>
            <div class="iconfont icon-play hide">&#xe607;</div>
            <div class="iconfont icon-next">&#xe611;</div>
        </div>
    </div>
    <audio id="h5audio_media" height="0" width="0" onerror="" src=""></audio>
    <!--功能及分享弹出框-->
    <div class="listen_box"></div>
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/touch.0.2.14.min.js"></script>
    <script src="js/lib/template.min.js"></script>
    <script src="js/player.js"></script>
    <script src="js/reqeust.js"></script>
     <!--热门单曲-->
    <script id="song-list-temp" type="text/html">
        {{each list as item i}}
        <li data-id="{{item.id}}" >
            <div>
                <span>{{i+1}}</span>
            </div>
            <div data-mp3="
                {{if item.path128 && item.path128.indexOf('.mp3') > -1}}
                    {{item.path128}}
                {{else if item.path192 && item.path192.indexOf('.mp3') > -1}}
                    {{item.path192}}
                {{else if item.path320 && item.path320.indexOf('.mp3') > -1}}
                    {{item.path320}}
                {{/if}}" class="j-add-to-player">
                <span class="title">{{item.mp3Name}}
                    {{if item.HQ}}
                    <b class="hq"></b>
                    {{/if}}
                    {{if item.MV}}
                    <b class="mv"></b>
                    {{/if}}
                </span>
                {{if item.singer && item.singer.length > 0}}
                <span class="name">{{item.singer[0].name}}</span>
                {{/if}}
            </div>
            <div data-singerId="{{if item.singer && item.singer.length > 0}}{{item.singer[0].id}}{{/if}}"
             class="fun"><img src="images/function.png" alt=""></div>
        </li>
        {{/each}}
    </script>
    <script>
        $(function () {
            var title = "",subtitle="",log="";
            // 返回到上一个页面
            $(".return").click(function () {
                history.back();
            });
            $(".listen_box").load("share.html");

            //热门单曲
            sendByUrl("/GetHotMusic",{pageindex:1,pagesize:100},function(res){
                $("#j-hot-song").html(template("song-list-temp", {
                    list: res || []
                }));
            });
            // 显示功能及分享弹出框
            $("body").on("tap",".fun",function () {
                var obj = $(this).parents("li");
                title = obj.find(".title").text().trim();
                subtitle = obj.find(".name").text().trim();
                log = obj.find("img").attr("src");
                // alert($(this).attr("data-mp3").trim());
                $(".box").removeClass("hide")//.find(".j-add-to-player").attr("data-mp3",$(this).attr("data-mp3").trim());
                $(".j-share-download").find("a").attr("href",$(this).parents("li").find(".j-add-to-player").attr("data-mp3").trim());
                $(".j-share-singer").attr("data-singerId",$(this).attr("data-singerId"));
                $(".j-share-mv").attr("data-singerId",$(this).attr("data-singerId"));
            });
            $("body").on(clickevent,".share_item",function () {
                var id = $(this).attr("data-id");
                shareInfo(title,subtitle,location.href,log,id);
            })
        });
    </script>
</body>
</html>